<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="dialogVisible"
      :direction="direction"
      :with-header="false"
      :close-on-press-escape="closeEscape"
      :before-close="handleClose"
      :size="size"
      :append-to-body="appendBody"
      :wrapperClosable="false"
      :modal-append-to-body="true"
    >
      <div class="rightDialog">
        <div flex="cross:center main:justify" class="rightConcat">
          <span style="font-size: 16px">{{ title }}</span>
          <span v-if="footerShow" flex="main:right">
            <el-button @click="handleClose" v-if="closeShow">取 消</el-button>
            <el-button
              type="primary"
              @click="handleConfirmClick"
              v-if="submitShow"
              :loading="commitLoading"
              >确 定</el-button
            >
          </span>
          <slot name="buttonPlus"></slot>
        </div>
        <slot style="padding: 16px"></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    // 按钮展示
    footerShow: {
      type: Boolean,
      default: true,
    },
    closeShow: {
      type: Boolean,
      default: true,
    },
    submitShow: {
      type: Boolean,
      default: true,
    },
    // 标题
    title: {
      type: String,
      default: "标题",
    },
    // 对齐方式
    direction: {
      type: String,
      default: "rtl",
    },
    // 宽度
    size: {
      type: String,
      default: "800px",
    },
    // 是否能通过esc关闭
    closeEscape: {
      type: Boolean,
      default: false,
    },
    // 弹窗显示
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 是否是嵌套
    appendBody: {
      type: Boolean,
      default: true,
    },
    // 加载
    loading: {
      type: Boolean,
      default: false,
    },
    commitLoading:{type:Boolean,default:false}
  },
  data() {
    return {};
  },
  methods: {
    // 取消
    handleClose() {
      this.$emit("handleClose");
    },
    // 确定
    handleConfirmClick() {
      this.$emit("handleConfirmClick");
    },
  },
};
</script>

<style scope>
.rightDialog {
  height: 100%;
  padding: 0 16px;
}
.rightConcat {
  /* padding-bottom:16px; */
  padding: 16px 0;
  overflow-y: auto;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
</style>
